<script setup lang="ts">
import { onMounted, ref } from "vue";
import { listServices } from "@/apis/services";

interface ServiceItem {
  videoCoverImg: string;
  // 可能还有其他属性
}

const servicesData = ref<ServiceItem[] | null>(null);
// 组件挂载完毕后调用接口
onMounted(async () => {
  try {
    const response = await listServices({
      data: {
        type: "60",
        pType: "2",
      },
    });
    servicesData.value = response.data; // 存储数据到响应式对象
    console.log("材料辅料:", response.data);
  } catch (error) {
    console.error("材料辅料:", error);
  }
});
</script>
<template>
  <div class="flex-shrink-0 w-full newimg" style="margin-top: 50px">
    <a-image-preview-group v-if="servicesData && servicesData">
      <SwiperSlide v-for="(item, index) in servicesData" :key="index" class="slide">
        <a-image :src="item.videoCoverImg" style="margin-bottom: 30px" />
      </SwiperSlide>
    </a-image-preview-group>
  </div>
</template>

<style lang="scss" scoped>
.newimg {
  width: 70%;
  margin: auto;
  display: block;
  margin-bottom: 30px; // 每张图片下方间距
}
</style>
